import myStyles from "./style.css";
import { Button } from "antd";
import {
  FormattedMessage,
  formatMessage,
  getLocale,
  setLocale
} from "umi/locale";

function changLang() {
  const locale = getLocale();
  if (!locale || locale === "zh-CN") {
    setLocale("en-US");
  } else {
    setLocale("zh-CN");
  }
}

export default () => {
  console.log(
    formatMessage({
      id: "helloworld"
    })
  );
  const helloworld = (
    <h1 className={myStyles.hello}>
      <div>
        <FormattedMessage id="helloworld" />
      </div>
    </h1>
  );
  const container = (
    <div>
      <Button
        size="small"
        onClick={() => {
          changLang();
        }}
      >
        <FormattedMessage id="lang" />
      </Button>
      {helloworld}
      <Button onClick={() => alert("Hello, world!")}>
        <FormattedMessage id="helloworld" />{" "}
      </Button>
      <br />
      <br />
      <span className={myStyles["override-ant-btn"]}>
        <Button type="primary" onClick={() => alert("Hello, world!")}>
          加入圆角的按钮 <FormattedMessage id="helloworld" />{" "}
        </Button>
      </span>
    </div>
  );
  return container;
};
